<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const goBack = () => {
    router.back()
}
</script>
<template>
    <div class="header">
        <div class="text">
            <div class="icon" @click="goBack">
                <img src="../../assets/img/ico_back_blue.png" alt="" srcset="">
            </div>
            <div class="title">
                <slot></slot>
            </div>
        </div>
        <div class="bottom">

        </div>
        <div class="bottom-linear">

        </div>
    </div>
</template>
<style lang="less">
@import url(../../assets/css/base.less);

.header {
    width: 10rem;
    height: 1.1733rem;

    .text {
        display: flex;
        align-items: center;
        height: .9067rem;

        img {
            display: block;
            width: .2933rem;
            margin-left: .4rem;
        }

        .title {
            width: 9.0133rem;
            font-size: .48rem;
            height: .48rem;
            line-height: .48rem;
            text-align: center;
            color: @heading-color;
        }
    }

    .bottom {
        width: 9.8667rem;
        height: .2133rem;
        background-image: url(../../assets/img/img_header_titlebar_bg.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        ;
        margin: 0 auto;
    }

    .bottom-linear {
        height: .0267rem;
        background: linear-gradient(90deg, rgba(75, 194, 255, 0.02) 0%, rgba(75, 194, 255, 0.3) 50.11%, rgba(75, 194, 255, 0.02) 100%);
    }
}
</style>